<template>
	<view class="nearby-order-success" :style="[AppSkinVar]">
		<view class="bg-white e-m-b-20">
			<view class="nearby-order-success__box e-flex e-flex-column">
				<image class="e-m-b-38" :src="$staticPath('user/success.png')"></image>
				<view class="e-m-b-20">
					{{ $t('order.支付成功') }}
				</view>
				<view class="e-m-b-60">{{ $unitEn }}{{ opt.money }}</view>
			</view>
			<view class="e-p-l-30 e-p-r-30 e-p-b-40">
				<view class="e-flex e-flex-between e-m-b-20">
					<text class="c-secondary">{{ $t('nearby.付款方式') }}</text>
					<text>{{ opt.mode }}</text>
				</view>
				<view class="e-flex e-flex-between">
					<text class="c-secondary">{{ $t('nearby.收款方') }}</text>
					<text>{{ opt.name }}</text>
				</view>
			</view>
		</view>
		<view class="bg-white e-p-30">
			<view class="text-center e-font-30 e-m-b-20">
				{{ $t('nearby.本次消费感受') }}
			</view>
			<view class="c-fd e-font-40 text-center e-m-b-16">{{ descScore }} {{ $t('nearby.分') }}</view>
			<view class="e-m-b-60  e-flex-xy-center">
				<image
					:src="$staticPath(`order/star${descScore > index ? '_act1' : ''}.png`)"
					class="img-50"
					@tap="descScore = index + 1"
					v-for="(item, index) in 5"
					:key="index"
				></image>
			</view>
			<view class="nearby-order-success__textarea">
				<textarea v-model="content" :placeholder="$t('nearby.输入评价')" placeholder-class="c-secondary" />
			</view>
			<view class="e-m-t-30">
				<upload ref="upload" :uploadIcon="$staticPath('user/upload.png')"></upload>
			</view>
		</view>
		<view class="nearby-order-success__btn e-flex-xy-center bg-white">
			<view class="bg-primary c-white text-center" @tap="back">
				{{ $t('order.提交') }}
			</view>
		</view>
	</view>
</template>

<script>
import {postPayEvaluate} from '@/common/request/api'
export default {
	data() {
		return {
			opt: {},
			id: null,
			content: '',
			descScore: 5
		}
	},
	onLoad(opt) {
		this.opt = opt
		this.id = opt.id
	},
	methods: {
		back () {
			let data = {
				orderId:this.id,
				score:this.descScore
			}
			if(this.content){
				data['content'] = this.content
			}
			let photos = this.$refs.upload.imgList.map(item => item.url).join(',')||null
			if(photos){
				data['photos'] = photos
			}
			postPayEvaluate(data).then(res => {
				if(res.code === 200){
					this.$back()
				}
			})
			
		}
	}
}
</script>

<style>
page {
	background: #f3f3f3;
	padding-bottom: 140rpx;
}
</style>

<style lang="scss" scoped>
.c-fd{
	color: #fd6d00;
}
.nearby-order-success {
	&__box {
		padding-top: 158rpx;
		margin: 0 auto;
		image {
			width: 320rpx;
			height: 224rpx;
		}
	}

	&__btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		> view {
			width: calc(100vw - 80rpx);
			padding: 24rpx 0;
			border-radius: 46rpx;
		}
	}
	&__textarea {
		height: 244rpx;
		border: 2rpx solid #ededed;
		padding: 24rpx;
		textarea{
			height: 100%;
		}
	}
}
</style>
